<template>
  <div>
    <Modal v-model="showAddr" width="850" :title="i18nText('address.shippingAddress', '收货人地址')">
      <Form
        :model="formData"
        ref="form"
        label-position="right"
        :label-width="180"
        :rules="ruleInline"
      >
        <FormItem :label="i18nText('address.country', '国家/地区')" prop="countryId">
          <Select v-model="formData.countryId" style="width:200px" filterable @on-change="countryChange">
            <Option v-for="item in countries" :value="item.id" :key="item.id">{{ item.name_en }}</Option>
          </Select>
        </FormItem>
        <FormItem :label="i18nText('address.consignee', '收货人')" prop="name">
          <i-input v-model="formData.name" style="width: 600px"></i-input>
        </FormItem>
<!--        <FormItem label="收件地区" prop="address">
          {{ formData.address || '暂无地址' }}
          <Button type="primary" style="margin-left: 10px;" size="small" @click="$refs.map.open()">选择</Button>
        </FormItem>-->
        <FormItem :label="i18nText('address.addressLine1', '详细地址')" prop="detail">
          <i-input v-model="formData.detail" style="width: 600px"></i-input>
        </FormItem>
        <Row>
          <Col span="12">
            <FormItem :label="i18nText('address.cityTown', '城市')" prop="cityName">
              <i-input v-model="formData.cityName" :placeholder="i18nText('address.pleaseEnterTheCityTown', '请输入城市')"></i-input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem :label="i18nText('address.provinceRegionState', '地区')" prop="region">
              <Select v-if="regiones && regiones.length > 0" v-model="formData.region" filterable>
                <Option v-for="item in regiones" :value="item.name_en" :key="item.id">{{ item.name_en }}</Option>
              </Select>
              <i-input v-else v-model="formData.region" :placeholder="i18nText('address.pleaseEnterTheRegion', '请输入地区')" ></i-input>
            </FormItem>
          </Col>
        </Row>
        <FormItem :label="i18nText('address.postalZIPCode', '邮政编码')" prop="postalCode">
          <i-input v-model="formData.postalCode" :placeholder="i18nText('address.pleaseEnterThePostalZipCode', '请输入邮政编码')" style="width: 600px"></i-input>
        </FormItem>
        <FormItem :label="i18nText('personInfo.phoneNumber', '手机号码')" prop="mobile">
          <i-input v-model="formData.mobile" style="width: 600px"></i-input>
        </FormItem>
        <FormItem :label="i18nText('address.note', '地址别名')">
          <i-input
            v-model="formData.alias"
            length
            :maxlength="30"
            :placeholder="i18nText('address.markThisAddress', '请输入地址别名，例如公司')"
            style="width: 600px"
          ></i-input>
        </FormItem>
        <FormItem :label="i18nText('address.defaultShippingAddress', '默认地址')">
          <i-switch v-model="formData.isDefault" />
        </FormItem>
      </Form>
      <div class="mt_20" slot="footer">
        <Button @click="hide">{{ i18nText('common.cancel', '取消') }}</Button>
        <Button type="primary" class="mr_10" :loading="loading" @click="save">{{ i18nText('common.save', '保存收货地址') }}</Button>
      </div>
    </Modal>
    <multipleMap ref="map" @callback="getAddress"></multipleMap>
  </div>
</template>

<script>
import multipleMap from "@/components/map/multiple-map";
import {
  newMemberAddress,
  editMemberAddress,
  getAddrDetail
} from '@/api/address';
import options from "@/store/global-address";
import { i18nText } from '@/utils/i18n'

export default {
  name: 'addressManage',
  props: {
    id: { // 传入的地址id
      defalut: '',
      type: String
    }
  },
  data () {
    return {
      showAddr: false, // 控制模态框显隐
      formData: { // 表单数据
        isDefault: false
      },
      ruleInline: { // 验证规则
        countryId: [{ required: true }],
        name: [{ required: true, message: i18nText('address.pleaseEnterTheConsigneesName', '请输入收货人姓名'), trigger: 'blur' }],
        address: [{ required: true, message: i18nText('address.pleaseEnterShippingAddress', '请输入地址'), trigger: 'change' }],
        detail: [
          { required: true, message: i18nText('address.pleaseEnterTheDetailedAddress', '请输入详细地址'), trigger: 'blur' }
        ],
        cityName: [{ required: true, message: i18nText('address.pleaseEnterTheCityTown', '请输入城市') }],
        region: [{ required: true, message: i18nText('address.pleaseEnterTheRegion', '请输入地区') }],
        postalCode: [{ required: true, message: i18nText('address.pleaseEnterThePostalZipCode', '请输入邮政编码') }],
        mobile: [
          { required: true, message: i18nText('personInfo.phoneNumberCannotBeEmpty', '手机号不能为空'), trigger: 'blur' },
          /*{
            type: 'string',
            pattern: /^1[3|4|5|6|7|8][0-9]{9}$/,
            message: '手机号格式出错',
            trigger: 'blur'
          }*/
        ]
      },
      loading: false, // 提交的加载状态
      mapMsg: {}, // 地图信息
      countries: [], // 国家
      regionMap: new Map, // 地区
      regiones: [], // 地区
    };
  },
  created() {
    // 国家
    let countries = []
    // 地区
    let regionMap = new Map()
    options.forEach(continent => {
      continent.childrens.forEach(country => {
        countries.push(country)
        regionMap.set(country.id, country.childrens)
      })
    })
    countries = countries.sort((a, b) => a.name_en.localeCompare(b.name_en))
    this.countries = countries
    this.regionMap = regionMap
  },
  methods: {
    save () { // 保存地址
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = this.formData;
          // params.consigneeAddressPath = params.address.replace(/\s/g, ',');
          delete params.address;
          this.loading = true;
          if (this.id) {
            editMemberAddress(params).then((res) => {
              this.loading = false;
              if (res.success) {
                this.$Message.success(i18nText('address.successfullyEditedShippingAddress', '编辑地址成功'));
                this.$emit('change', true);
                this.hide();
              }
            }).catch(() => { this.loading = false; });
          } else {
            newMemberAddress(params).then((res) => {
              this.loading = false;
              if (res.success) {
                this.$Message.success(i18nText('address.successfullyAddedNewAddress', '新增地址成功'));
                this.$emit('change', true);
                this.hide();
              }
            }).catch(() => { this.loading = false; });
          }
        }
      });
    },
    getAddrById (id) {
      // 获取地址详情
      getAddrDetail(id).then((res) => {
        if (res.success) {
          console.log(res);
          const data = res.result;
          data.address = res.result.consigneeAddressPath.replace(/,/g, ' ');
          this.formData = data;
        }
      });
    },
    getAddress (val) {
       // 获取地图选择信息
       if(val.type === 'select'){
        const paths = val.data.map(item => item.name).join(',')
        const ids = val.data.map(item => item.id).join(',')
        this.$set(this.formData,'address',paths)
        this.$set(this.formData,'consigneeAddressIdPath',ids)
        const coord = val.data[val.data.length - 1].center.split(',')
        this.formData.lat = coord[1]
        this.formData.lon = coord[0]
      }else{
        this.$set(this.formData, "address", val.data.addr);
        this.$set(this.formData, "consigneeAddressIdPath", val.data.addrId);
        this.$set(this.formData, "detail", val.data.address);
        this.formData.lat = val.data.position.lat;
        this.formData.lon = val.data.position.lng;
      }

    },
    show () { // 地址模态框显示
      this.showAddr = true;
    },
    hide () { // 地址模态框隐藏
      this.showAddr = false;
    },
    /**
     * 国家选择监听
     * @param countryId
     */
    countryChange(countryId) {
      this.regiones = this.regionMap.get(countryId)
    }
  },
  watch: {
    id: { // 传入的地址id
      handler: function (v) {
        if (v) {
          this.getAddrById(v);
        } else {
          this.formData = {isDefault: false}
          this.$refs.form.resetFields();
        }
      }
    }
  },
  components: {
    multipleMap
  }
};
</script>

<style scoped lang="scss">
.add-box {
  margin: 40px 0;
}
</style>
